import 'package:flutter/material.dart';
import './data.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: const Text('这是列表页面')),
      body: const MyText(),
    ),
  ));
}

// gridView实现网格布局  GridView.count
class MyText1 extends StatelessWidget {
  const MyText1({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 一行显示多少个元素
      crossAxisCount: 3,
      children: const [
        Icon(Icons.abc),
        Icon(Icons.abc_sharp),
        Icon(Icons.access_alarm_outlined),
        Icon(Icons.access_alarms),
        Icon(Icons.accessibility_new_rounded),
        Icon(Icons.abc),
        Icon(Icons.abc_sharp),
        Icon(Icons.access_alarm_outlined),
        Icon(Icons.access_alarms),
        Icon(Icons.accessibility_new_rounded),
      ],
    );
  }
}

//  girdeView.extent
class MyText2 extends StatelessWidget {
  const MyText2({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      // 每个元素的最大长度
      maxCrossAxisExtent: 120,
      children: const [
        Icon(Icons.abc),
        Icon(Icons.abc_sharp),
        Icon(Icons.access_alarm_outlined),
        Icon(Icons.access_alarms),
        Icon(Icons.accessibility_new_rounded),
        Icon(Icons.abc),
        Icon(Icons.abc_sharp),
        Icon(Icons.access_alarm_outlined),
        Icon(Icons.access_alarms),
        Icon(Icons.accessibility_new_rounded),
      ],
    );
  }
}

//  GridView.count中的属性
class MyText3 extends StatelessWidget {
  const MyText3({super.key});

  List<Widget> _renderList() {
    List<Widget> tempList = [];
    for (var k = 0; k < listData.length; k++) {
      tempList.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.lightBlue,
          ),
          // 动态的内容前面不能加const
          child: Text(
            '${listData[k]['name']}',
            style: const TextStyle(color: Colors.white, fontSize: 20),
          ),
        ),
      );
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      // 每行有多少个元素
      crossAxisCount: 3,
      // 横向间距
      crossAxisSpacing: 10,
      // 纵向间距
      mainAxisSpacing: 10,
      // 宽高比
      // childAspectRatio: 1.7,
      children: _renderList(),
    );
  }
}

class MyText4 extends StatelessWidget {
  const MyText4({super.key});

  List<Widget> _renderList() {
    List<Widget> tempList = [];
    for (var k = 0; k < listData.length; k++) {
      tempList.add(
        Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.lightBlue,
          ),
          // 动态的内容前面不能加const
          child: Column(
              // 左右对齐
              crossAxisAlignment: CrossAxisAlignment.center,
              // 上下对齐
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(
                  listData[k]['avator'],
                  width: 50,
                  height: 50,
                ),
                Text(
                  '${listData[k]['name']}',
                  style: const TextStyle(color: Colors.white, fontSize: 20),
                )
              ]),
        ),
      );
    }
    return tempList;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      // 每个元素的最大长度
      maxCrossAxisExtent: 120,
      // 横向间距
      crossAxisSpacing: 10,
      // 纵向间距
      mainAxisSpacing: 10,
      // 宽高比
      // childAspectRatio: 1.7,
      children: _renderList(),
    );
  }
}

class MyText5 extends StatelessWidget {
  const MyText5({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 3,
          // 宽高比
          childAspectRatio: 1),
      itemBuilder: (context, index) {
        return Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.lightBlue,
          ),
          // 动态的内容前面不能加const
          child: Column(
              // 左右对齐
              crossAxisAlignment: CrossAxisAlignment.center,
              // 上下对齐
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(
                  listData[index]['avator'],
                  width: 50,
                  height: 50,
                ),
                Text(
                  '${listData[index]['name']}',
                  style: const TextStyle(color: Colors.white, fontSize: 20),
                )
              ]),
        );
      },
    );
  }
}

class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: listData.length,
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          maxCrossAxisExtent: 120,
          // 宽高比
          childAspectRatio: 1),
      itemBuilder: (context, index) {
        return Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.lightBlue,
          ),
          // 动态的内容前面不能加const
          child: Column(
              // 左右对齐
              crossAxisAlignment: CrossAxisAlignment.center,
              // 上下对齐
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.network(
                  listData[index]['avator'],
                  width: 50,
                  height: 50,
                ),
                Text(
                  '${listData[index]['name']}',
                  style: const TextStyle(color: Colors.white, fontSize: 20),
                )
              ]),
        );
      },
    );
  }
}
